<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Success</title>
<style type="text/css">
body {
	margin: 0px 0px;
}

.main_form {
	padding: 0px;
	border: 1px solid #bacdb7;
	margin-top: 100px;
	margin-left: 25%;
	width: 50%;
	height: 400px;
	position: absolute;
}

.error {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}

.info,.success,.error {
	width: 50%;
	padding: 5px;
	border: 1px solid transparent;
	border-radius: 4px;
	margin-left: 25%;
	margin-top: 100px;
}

.info {
	color: #31708f;
	background-color: #d9edf7;
	border-color: #bce8f1;
}

.success {
	background-color: #dff0d8;
	border-color: #bacdb7;
	color: #819f21;
}

.header {
	background-color: #eee;
	text-indent: 0;
	top: 0px;
	display: inline-block;
	height: 40px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-collapse: 0px;
	border-spacing: 0px;
	position: fixed;
}

.logoutdiv {
	display: inline-block;
	float: right;
	margin-right: 10px;
	width: 250px;
	height: 40px;
}

.btn_logout {
	margin-top: 5px;
	color: #fff;
	background-color: #428bca;
	border: 1px solid #357ebd;
	border-radius: 10px;
	width: 70px;
	height: 25px;
	text-decoration: none;
	display: block;
	text-align: center;
}

.btn_primary {
	margin-top: 5px;
	color: #fff;
	background-color: #428bca;
	border: 1px solid #357ebd;
	border-radius: 10px;
	width: 100px;
	height: 25px;
	text-decoration: none;
	display: block;
	text-align: center;
}

.btn_primary:hover {
	color: #fff;
	background-color: #3276b1;
	border-color: #285e8e;
	cursor: pointer;
}

.btn_post {
	display: block;
	color: #333;
	background-color: #fff;
	border: 1px solid #ccc;
	text-decoration: none;
	width: 50px;
	height: 20px;
	border-radius: 10px;
	text-align: center;
}

.btn_post:hover {
	color: #333;
	background-color: #ebebeb;
	border-color: #adadad
}

.btn_logout:hover {
	color: #fff;
	background-color: #3276b1;
	border-color: #285e8e
}

.resultBox {
	width: 100%;
	overflow-y: auto;
	max-height: 350px;
	margin-top: 0px;
	border-top: 1px solid #ddd;
	font-family: inherit;
}

.msgBox {
	max-height: 100px;
	max-width: 295px;
	width: 295px;
	height: 100px;
	margin-top: 50px;
}

.rowodd {
	background-color: #fff;
	width: 100%;
	height: 40px;
	max-height: inherit;
}

.roweven {
	background-color: #f5f5f5;
	width: 100%;
	height: 40px;
	max-height: inherit;
}

.messageTable td {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	word-wrap: break-word;
}

.messageTable {
	table-layout: fixed;
	width: 100%;
	max-height: 400px;
	margin-top: 0px;
	border-collapse: collapse;
}

.messageTable a {
	text-decoration: none;
	font-size: 17px;
}

.delete_btn:LINK,.delete_btn:VISITED {
	text-decoration: none;
	font-size: 17px;
	color: #aaa;
}

.delete_btn:HOVER {
	cursor: default;
	color: red;
}
</style>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$('#btn_post_msg').click(function() {
			$('#resultBox').empty();
			$('#resultBox').html($('#msgDiv').html());
		});
	});
	function formSubmit(form) {
		document.getElementById(form).submit();
	}
</script>

</head>
<body>
	<c:url value="/j_spring_security_logout" var="logoutUrl" />
	<form action="${logoutUrl}" method="post" id="logoutForm">
		<input type="hidden" name="${_csrf.parameterName}"
			value="${_csrf.token}" />
	</form>
	<div class="header">
		<div class="logoutdiv">
			<a href="javascript:formSubmit('logoutForm')" class="btn_logout">Logout</a>
		</div>
		<div
			style="float: right; margin-right: 10px; height: 40px; margin-top: 10px; vertical-align: middle; display: inline-block;">${pageContext.request.userPrincipal.name}</div>

	</div>
	<div class="main_form">
		<table align="center" width="100%" height="100%">
			<tr>
				<td>
					<table align="center">
						<tr>
							<td><a id="btn_post_msg" class="btn_primary">Post
									Message</a></td>
							<td><a href="/getMessage" class="btn_primary">Show
									Messages</a></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td style="height: 370px; width: 100%; vertical-align: top;">
					<div class="resultBox" id="resultBox">
						<c:choose>
							<c:when test="${not empty msgList}">
								<table class="messageTable">
									<c:forEach var="message" items="${msgList}" varStatus="status">
										<c:choose>
											<c:when test="${(status.index)%2 eq 0}">
												<tr class="roweven">
												<td width="15px">${status.count}.</td>
												<td width="300px">${message.value}</td>
												<td width="10" align="center"><a
													href="/deleteMessage?key=${message.key}" class="delete_btn">x</a></td>
											</tr>
											</c:when>
											<c:otherwise>
												<tr class="rowodd">
												<td width="15px">${status.count}.</td>
												<td width="300px">${message.value}</td>
												<td width="10" align="center"><a
													href="/deleteMessage?key=${message.key}" class="delete_btn">x</a></td>
											</tr>
											</c:otherwise>
										</c:choose>
									</c:forEach>
								</table>
							</c:when>
							<c:when test="${not empty info_msg}">
								<div class="info">
									<p align="center">${info_msg}</p>
								</div>
							</c:when>
							<c:when test="${not empty suc_msg}">
								<div class="success">
									<p align="center">${suc_msg}</p>
								</div>
							</c:when>
							<c:when test="${not empty error_msg}">
								<div class="error">
									<p align="center">${error_msg}</p>
								</div>
							</c:when>
						</c:choose>

					</div>
				</td>
			</tr>
		</table>
	</div>
	<div id="msgDiv" style="display: none;">
		<form action="/postMessage" method="post" id="msgForm">
			<input type="hidden" name="${_csrf.parameterName}"
				value="${_csrf.token}" />
			<table align="center">
				<tr>
					<td><textarea class="msgBox" id="msgBox" name="msgBox"></textarea></td>
				</tr>
				<tr>
					<td><a href="javascript:formSubmit('msgForm')"
						class="btn_post">Post</a></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>